// An highlighted block
<template>
	<view class="content">
		<view class = "login_from">
			
				<view class="login_from_input">
					<view class="login_from_name">用户名</view>
					<view class="login_from_fun">
						<input class="input" type="text" v-model="name" placeholder="请输入用户名"/>
					</view>
				</view>
				
				<view class="login_from_input">
					<view class="login_from_name">密码</view>
					<view class="login_from_fun">
						<input type="digit" v-model="password" password="true" placeholder="请输入登录密码">
					</view>
				</view>
				
				<view class="login_from_dl">
					<button class="btnValue" @click="login">登录</button>
				</view>
				
				<view class="forgotBtn">
					<navigator url="/pages/login/forget">忘记密码</navigator>
				</view>
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="提示信息" :content="messageText"></uni-popup-dialog>
				</uni-popup>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name : "",
				password: "",
				msgType:"",
				messageText:""
			}
		},

		methods: {
			login(){
			        //账号
				    let name = this.name;
				    //密码
				    let password = this.password;
			        //写完上面定义后就打印一下
			        console.log(name);
					uni.request({
						url: "http://localhost:8080/user/login", 
						method: 'POST',
						data: {
							name:	 this.$encryptByPublicKey(this.name),
							password:this.$encryptByPublicKey(this.password)
						},
						header: {
							'Content-Type':'application/x-www-form-urlencoded' //请求头信息
						},
						success: (res) => { //如果访问接口成功就会进入success
							if(res.data.message!=null){
								this.msgType = "error";
								this.messageText = "用户名或密码错误";
								this.$refs.alertDialog.open()
							}
							else{
								uni.setStorageSync("token","Bearer " + res.data);
								this.checkAdmin();
							}
						},
						fail:(err) => {
										return uni.showToast({
											icon: 'loading',
											title:'请求失败'
										})
										reject(err)
									}
					});
			},
			checkAdmin(){
				uni.request({
					url:"http://localhost:8080/user/token",
					method:"GET",
					header:{
						Authorization : uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res.data);
						if(res.data.role != "admin"){
							uni.clearStorageSync("token");
							this.name = "";
							this.password = "";
							this.msgType = "error";
							this.messageText = "无管理员权限！";
							this.$refs.alertDialog.open()
						}
						else{
							uni.setStorageSync("uid",res.data.uid);
							uni.switchTab({
								url:"/pages/activity/activity-management"
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{ background: #fff; }
	.login_from{
		width: 100%; 
		height: auto; 
		box-sizing: border-box; 
		padding: 20upx 8%; 
	}
	.login_from_name{ width: 20%; }
	.avatorWrapper{
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.avator{
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}
	.avator .img{
		width: 100%
	}
	.form{
		padding: 0 100upx;
		margin-top: 80px;
	}
	.loginBtn{
		width: 100%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
			margin-top: 2vh;
			display: flex;
			justify-content: center;
 
			::v-deep text {
				margin: 0 2vw;
			}
	}
	.login_from_input{ 
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 40upx 0px; 
		margin: 0px auto;  
	}
	.login_from_fun{ 
		width: 80%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		align-items: center;  
	}
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	.login_from_dl{
		width: 100%; 
		height: 50px; 
		line-height: 50px; 
		margin-top: 150upx;   
	}
	.login_from_dl button{ 
		width: 100%; 
		height: 50px; 
		line-height: 50px; 
		background: #2979ff; 
		color: #fff; 
		border-radius: 0px; 
	}
</style>